<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">

    <style>
        .layui-hide{  /*最后的pic为字段的field*/
            height: 100%;
            max-width: 100%;
        }
        .layui-table-cell{
            height:auto !important;
        }
        #test-n2 {
            position: relative;
            min-height: 400px !important;
            width: 100% !important;
        }
        #test-n2 #layui-laydate2 .layui-laydate-main{
            width: 100%;
        }
        #test-n2  #layui-laydate1,#test-n2  #layui-laydate1 .layui-laydate-main,#test-n2 .layui-laydate-content table{
            width: 100%;
        }

        #test-n2 .layui-laydate-content table tbody{
            height:calc(100vh - 400px)!important;
        }
        .text_box{
            padding: 15px !important;
        }

        #test-n3 {
            position: relative;
            min-height: 400px !important;
            width: 100% !important;
        }

        #layui-laydate1,#layui-laydate2{
            width: 100% !important;
        }
        #test-n3  #layui-laydate1 .layui-laydate-main{
            width:50%;
        }

        #test-n3  #layui-laydate1 .layui-laydate-main table{
            width: 100% !important;
        }
        #test-n3 .layui-laydate-content table tbody{
            height:calc(100vh - 240px)!important;
        }
        .layui-laydate-main{
            width:100%;!important;
        }
    </style>
</head>
<body>



<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">商品管理</div>
                <div class="layui-card-body">
                    <div class="layui-form-item layui-form">

                        <div class="layui-inline">
                            <div class="layui-inline">
                                <div class="layui-btn-group test-table-operate-btn">
                                    <button class="layui-btn" data-type="addadmin">添加产品</button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="gtour_title" id="gtour_title" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <div class="layui-btn-group test-table-operate-btn">
                                <button class="layui-btn" data-type="searchUserButton">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate" lay-size="lg">

                        <script type="text/html" id="is_show_switch">
                            <input type="checkbox" name="is_display" lay-skin="switch" lay-text="上架|下架" lay-filter="is_show_switch"
                                   value="{{ d.is_display }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.is_display == 0 ? 'checked' : '' }}>
                        </script>

                    </table>
                    <script type="text/html" id="test-pass">

                    </script>
                    <script type="text/html" id="test-table-operate-barDemo">

                        <a class="layui-btn layui-btn-normal layui-btn-xs" id="showImg" lay-event="showImg">往期照片</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" id="bq" lay-event="date">班期</a>
                        <a class="layui-btn layui-btn-xs" id="add_xc" lay-event="add_travel">添加行程</a>
                        <a class="layui-btn layui-btn-xs" id="llok_xc" lay-event="look_travel">查看行程</a>
                        <a class="layui-btn layui-btn-xs" id="edit_xc" lay-event="edit_travel">修改行程</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" id="edit" lay-event="edit">修改</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" id="del" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<!--排班-->
<div id="pbmodal" style="display: none;padding: 30px;">
    <input type="hidden" id="paiban_admin_id">
    <input type="hidden" id="team_id" value="{$team_id}">
    <div class="layui-inline" id="test-n2" ></div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form','table','laydate','set','layedit','upload'], function(){
        $ = layui.jquery;
        var table = layui.table
            ,admin = layui.admin
            ,element = layui.element
            ,layer = layui.layer
            ,laydate = layui.laydate,
            upload = layui.upload
            ,form = layui.form;

        table.render({
            elem: '#test-table-operate'
            ,url: "{:url('Goods/goods')}"
            ,height: 'full-100'
            ,cols: [[
                {field:'id',align:"center",title: 'ID'}
                ,{field:'gtour_title',align:"center",title: '跟团游标题'}
                ,{field:'gtour_covers', align:'center', title: '跟团游封面',style:"height:100px;",templet:function(d){
                        return "<img src=" +d.gtour_covers+ ">"}}
                ,{field:'gtour_label',align:"center",title: '跟团游标签'}
                ,{field:'gtours_type',align:"center",title: '几日游',templet:function(d){
                        if(d.gtours_type == 1){
                            return "一日游";
                        }else if (d.gtours_type == 2){
                            return "多日游";
                        }
                    }}
                ,{field:'gtour_price',align:"center",title: '价格'}
                ,{field:'lv_days',align:"center",title: '白天天数'}
                ,{field:'lv_nghit',align:"center",title: '晚上天数'}
                ,{field:'start',align:"center",title: '出发地址'}
                ,{field:'is_display', align:'center', title: '是否上架',templet: '#is_show_switch'}
                ,{width:450,align:'center', title: '操作',fixed: 'right', toolbar: '#test-table-operate-barDemo'}

            ]]
            ,page: true
            ,limit: 20
        });

        form.render(null, 'component-form-group');

        laydate.render({
            elem: '#LAY-component-form-group-date'
        });
        //定义json
        var  data='';
        var  dataArr = [];
        var new_date = new Date();
        //监听工具条
        table.on('tool(test-table-operate)', function(obj){
            var data = obj.data;

            if(obj.event === 'showImg') {
                top.layui.index.openTabsPage("{:url('Goods/lookImage')}?gt_id=" + data.id,'往期相册');
            }else if(obj.event === 'date'){
                var loading = layer.load(1, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                $('#paiban_admin_id').val(data.id);
                $.ajax({
                    url: "{:url('Goods/banQi')}",
                    type: 'post',
                    dataType: 'json',
                    data: {gt_id:data.id},
                    success: function(returnData){
                        layer.close(loading);
                        if (returnData.code === 0) {
                            $('#test-n2').html('');
                            data = returnData.data;
                            console.log(data);
                            loding_date(new_date ,data);
                            var pbmodal = layer.open({
                                title:'排班'
                                ,type: 1
                                ,shadeClose: false
                                ,area: ['700px']
                                ,content: $('#pbmodal')
                            });
                        }else{
                            layer.msg('系统错误',{icon:2,time:1000});
                        }
                    }
                })
            }
            else if(obj.event ==='add_travel'){
                top.layui.index.openTabsPage("{:url('Goods/addTravel')}?gt_id=" + data.id,'添加详细行程');
            }else if(obj.event === 'look_travel'){
                top.layui.index.openTabsPage("{:url('Goods/lookTravel')}?gt_id=" + data.id,'查看详细行程');
            }else if(obj.event === 'edit_travel'){
                top.layui.index.openTabsPage("{:url('Goods/editTravel')}?gt_id=" + data.id,'修改详细行程');
            }else if(obj.event === 'edit'){
                window.location.href="{:url('Goods/editGoods')}?id="+data.id;
            }else if(obj.event === 'del'){
                layer.confirm('确认删除吗？', function(index){
                    var loading = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: "{:url('Goods/delGoods')}",
                        type: 'post',
                        dataType: 'json',
                        data: {id:data.id},
                        success: function(msg){
                            layer.close(loading);
                            if (msg === "1") {
                                layer.closeAll();
                                window.location.reload();
                            }else{
                                layer.msg('删除失败',{icon:2,time:1000});
                            }
                        }
                    })

                });
            }
        });

        //监听是否上架
        form.on('switch(is_show_switch)', function(obj){
            var loading = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            json = table.clearCacheKey(json);

            var is_display = this.checked ? '0' : '1';

            $.ajax({
                url: "{:url('Goods/editIsDisplay')}",
                type: 'post',
                dataType: 'json',
                data: {id:json.id,is_display:is_display},
                success: function(info){
                    if (info.code === 0) {
                        layer.close(loading);
                    }else if(info.code === 2){
                        layer.msg('往期相册必须大于三张',{icon:2,time:2000},function(){
                            window.location.reload();
                        });
                    }
                    else{
                        layer.msg('失败',{icon:2,time:1000},function(){
                            window.location.reload();
                        });
                    }
                }
            })
        });



        var $ = layui.$, active = {
            addadmin: function() {
                window.location.href="{:url('Goods/addGoods')}";
            },
            searchUserButton:function(){
                var nickname  = $('#nickname').val();

                var content = $('#content').val();
                table.reload('test-table-operate', {
                    where: {
                        nickname:nickname,
                        content:content,
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                //return false;
            }
        };
        //绑定点击事件
        $('.test-table-operate-btn .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //日历插件调用方法
        function loding_date(date_value,data){
            laydate.render({
                elem: '#test-n2'
                ,type: 'date'
                ,theme: 'grid'
                ,min:0
                ,position: 'static'
                ,range: false
                ,value:date_value
                ,isInitValue: false
                ,calendar: false
                ,btns:false
                ,ready: function(value){
                    //console.log(value);
                    hide_mr(value);
                }
                ,done: function(value, date, endDate){
                    //调用弹出层方法
                    console.log(data);
                    date_chose(value,data);
                }
                ,change:function(value,date){
                    hide_mr(date);
                }
                , mark:data//重要json！

            });
        }

        function hide_mr(value){
            var mm = value.year+'-'+value.month+'-'+value.date;

            $('.laydate-theme-grid table tbody').find('[lay-ymd="'+mm+'"]').removeClass('layui-this');
            //console.log(value)
        }
        //获取隐藏的弹出层内容
        var date_choebox = $('.date_box').html();

        //定义弹出层方法
        var setLayer = '';
        function date_chose(obj_date,data){
            console.log(obj_date,data);
            setLayer = layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                title:'添加班期',
                area: ['600px', 'auto'], //宽高
                btn:['确定','撤销','取消'],
                btnAlign: 'c',
                content: ' <div class="laydateNote_text_box">' +
                '<form class="layui-form" action="">' +
                '<div class="layui-form-mid layui-word-aux">' +

                '</div>' +
                '<div class="layui-form-item layui-form-text" style="margin-left: 20px;margin-right: 20px">' +
                '<input id="text_book" placeholder="请输入价格" class="layui-textarea">' +
                '</div>' +
                '</form>' +
                '</div>'

                ,success:function(){

                }
                ,yes:function (){
                    var content = $("#text_book").val();
                    chose_moban(obj_date,data,content);

                }
                ,btn2:function (){
                    chexiao(obj_date,data);

                }
                ,btn3:function (){

                }
            });
        }

        //定义添加/编辑标注方法
        function chose_moban(obj_date,markJson,date_data){
            var loading = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            //获取弹出层val
            var team_id = $("#team_id").val();
            var paiban_status = date_data;
            var paiban_date = obj_date;
            var tg_id = $('#paiban_admin_id').val();
            var theTime = obj_date.substring(obj_date.length-2);
            if (theTime*1<10){
                theTime = theTime.substring(1);
            }
            date_data = '￥'+paiban_status+'<br>'+theTime;
            var chose_moban_val = date_data;

            $.ajax({
                url: "{:url('Goods/setPaiban')}",
                type: 'post',
                dataType: 'json',
                data: {tg_id:tg_id,tg_date:paiban_date,tg_price:paiban_status,team_id:team_id},
                success: function(returnData){
                    layer.close(loading);
                    if (returnData.code === 0) {
                        layer.close(setLayer);
                        $('#test-n2').html('');//重要！由于插件是嵌套指定容器，再次调用前需要清空原日历控件

                        //添加属性
                        markJson[obj_date] = chose_moban_val;

                        data = {
                            time:obj_date,
                            value:chose_moban_val
                        }
                        //添加修改数值
                        for (var i in dataArr) {
                            if(dataArr[i].time==obj_date){
                                dataArr[i].value = chose_moban_val;
                                dataArr.splice(i, 1);
                            }
                        }
                        dataArr.push(data);

                        //按时间正序排序

                        dataArr.sort(function(a,b){
                            return Date.parse(a.time) - Date.parse(b.time);//时间正序
                        });

                        //再次调用日历控件，
                        loding_date(obj_date,markJson);//重要！，再标注一个日期后会刷新当前日期变为初始值，所以必须调用当前选定日期。
                    }else{
                        layer.msg('系统错误',{icon:2,time:1000});
                    }
                }
            })
        }

        //撤销选择
        function chexiao(obj_date,markJson){
            var loading = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            var paiban_date = obj_date;
            var admin_id = $('#paiban_admin_id').val();
            var team_id = $("#team_id").val();
            $.ajax({
                url: "{:url('Goods/delPaiban')}",
                type: 'post',
                dataType: 'json',
                data: {tg_id:admin_id,tg_date:paiban_date,teams_id:team_id},
                success: function(returnData){
                    layer.close(loading);
                    if (returnData.code === 0) {
                        layer.close(setLayer);
                        //删除指定日期标注
                        delete markJson[obj_date];
                        //console.log(JSON.stringify(markJson));
                        for (var i in dataArr) {
                            if(dataArr[i].time==obj_date){
                                dataArr.splice(i, 1);
                            }
                        }
                        //原理同添加一致
                        $('#test-n2').html('');
                        loding_date(obj_date,markJson);
                    }else{
                        layer.msg('系统错误',{icon:2,time:1000});
                    }
                }
            })
        }
    });

</script>

</body>
</html>